<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>MinesFinder</title>
    <link rel="icon" typ="image/png" href="favicon.png">
    <link href="s40-theme/css/s40-theme.css" rel="stylesheet" type="text/css" />
    <link href="game.css" rel="stylesheet" type="text/css" />
    <script language="javascript" type="text/javascript" src="game.js"></script>
    <script type="text/javascript">
    
    	document.write('<style type="text/css">');
	    for (var c=0; c<101; c++)
		{
	    	document.write('.clearedFieds'+c+' { display: block; }');			
		}
	    document.write('</style>');
	    
    	initializeGame();

    </script>   
</head>
<body>
    <div id="gamePage" class="ui-page">
        <!-- header -->
        <div class="ui-header">
            <div onclick="mwl.hide('#gamePage'); mwl.show('#settingsPage');" class="ui-title inline"><h2>MinesFinder</h2></div>
        </div>
        <div class="ui-content">
 			
			<!-- tab-control -->
			<div class="ui-tab-control inline">
				<div class="ui-tab ui-tab-selected inline"     id="tab_1" onclick="mwl.setGroupTarget('#tab_control_content', '#tab_1_content', 'ui-show', 'ui-hide');mwl.switchClass('#tab_1', 'ui-tab-not-selected', 'ui-tab-selected');mwl.switchClass('#tab_2', 'ui-tab-selected', 'ui-tab-not-selected');">Dig</div>
				<div class="ui-tab ui-tab-not-selected inline" id="tab_2" onclick="mwl.setGroupTarget('#tab_control_content', '#tab_2_content', 'ui-show', 'ui-hide');mwl.switchClass('#tab_2', 'ui-tab-not-selected', 'ui-tab-selected');mwl.switchClass('#tab_1', 'ui-tab-selected', 'ui-tab-not-selected');">Flag</div>
		    </div>
				      
							
			   <div class="ui-tab-content-row" id="tab_control_content">
			     <div id="tab_1_content" class="ui-show">
					
<table cellspacing="0" cellpadding="0">

<script type="text/javascript">
	var i=0;
	
	for (yy=0; yy<10; yy++)
	{
		document.write("<tr>");
		for (xx=0; xx<10; xx++)
		{
			if (mf.field[xx][yy] == "X")
			{
				id = " id='digBomb"+i+"'";
				i++;
				mwl1 = "mwl.hide('#gamePage'); mwl.show('#loosePage');";
			} else {
				id = "";
				mwl1 = "mwl.toggleClass('#digDiggedField-" + xx + "-" + yy + "','ui-hide'); mwl.toggleClass('#digEmptyField-" + xx + "-" + yy + "','ui-hide');"
					 + "mwl.toggleClass('#flagDiggedField-" + xx + "-" + yy + "','ui-hide'); mwl.toggleClass('#flagEmptyField-" + xx + "-" + yy + "','ui-hide');";
			}
			
			document.write("<td" + id + ">");
			document.write("<div class='gameField' id='digEmptyField-" + xx + "-" + yy + "' onclick=\"" + mwl1 + "\"></div>");
			document.write("<div class='gameField ui-hide' id='digDiggedField-" + xx + "-" + yy + "'>" +  mf.field[xx][yy] + "</div>");
			document.write("<div class='gameField flaggedField ui-hide' id='digFlaggedField-" + xx + "-" + yy + "'>F</div>");
			document.write("</td>");
		}
		document.write("</tr>");
	}

</script>

</table>
					
			     </div>
			     <div id="tab_2_content" class="ui-hide">

<table cellspacing="0" cellpadding="0">

<script type="text/javascript">
	var i=0;
	
	for (yy=0; yy<10; yy++)
	{
		document.write("<tr>");
		for (xx=0; xx<10; xx++)
		{
			mwl1 = "mwl.toggleClass('#flagFlaggedField-" + xx + "-" + yy + "','ui-hide'); mwl.toggleClass('#flagEmptyField-" + xx + "-" + yy + "','ui-hide');"
				 + "mwl.toggleClass('#digFlaggedField-" + xx + "-" + yy + "','ui-hide'); mwl.toggleClass('#digEmptyField-" + xx + "-" + yy + "','ui-hide');"
			mwl2 = "mwl.setGroupNext('#counter', 'inline', 'ui-hide', 'next');";
			mwl3 = "mwl.setGroupNext('#counter', 'inline', 'ui-hide', 'prev');";
			
			if (mf.field[xx][yy] == "X")
			{
				id = " id='flagBomb"+i+"'";
				i++;
				mwl2 += "mwl.iterateClass('#gameCounter', 'clearedFieds', 'next', 101, false, 'mwl.hide(\\\'#gamePage\\\'); mwl.show(\\\'#winPage\\\');');";
				mwl3 += "mwl.iterateClass('#gameCounter', 'clearedFieds', 'prev', 101, false, '');";
			} else {
				id = "";
				mwl3 += "mwl.iterateClass('#gameCounter', 'clearedFieds', 'next', 101, false, 'mwl.hide(\\\'#gamePage\\\'); mwl.show(\\\'#winPage\\\');');";
				mwl2 += "mwl.iterateClass('#gameCounter', 'clearedFieds', 'prev', 101, false, '');";
			}
			
			document.write("<td" + id + ">");
			document.write("<div class='gameField' id='flagEmptyField-" + xx + "-" + yy + "' onclick=\"" + mwl1 + mwl2 + "\"></div>");
			document.write("<div class='gameField ui-hide' id='flagDiggedField-" + xx + "-" + yy + "'>" +  mf.field[xx][yy] + "</div>");
			document.write("<div class='gameField flaggedField ui-hide' id='flagFlaggedField-" + xx + "-" + yy + "' onclick=\"" + mwl1 + mwl3 + "\">F</div>");
			document.write("</td>");
		}
		document.write("</tr>");
	}

</script>

</table>

			     </div>
			     
			   </div> 	
			</div>
 			
 			<div id="gameCounter" class="clearedFieds90">
 			    <div>Mines: 10  -  Flags:  			    
 			    
					<script type="text/javascript">
						document.write('<div id="counter" class="inline">');
						document.write('<div class="inline">10</div>');
						
						for (cc=9; cc>-91; cc--)
						{
							document.write('<div class="ui-hide">' + cc + '</div>')
						}

						document.write('</div>');
					</script>
				</div>
		    </div>
 			
		</div>
		
		<div id="loosePage" class="ui-page ui-hide">
		    <!-- header -->
	        <div class="ui-header">
	            <div class="ui-title inline"><h2>MinesFinder</h2></div>
	        </div>
	        
			<h1 style="margin: 0.5em; font-size: large;">You loose!</h1>
			<div style="text-align: center; margin-top: 0.5em;">
				<input style="width: 80%;" type="button" name="button1" class="ui-button" value="Start a new game." onclick="location.reload();"/>
				<input style="width: 80%;" type="button" name="button2" class="ui-button" value="Settings and Infos." onclick="mwl.hide('#loosePage'); mwl.show('#settingsPage');"/>
			</div>
			<p style="margin: 0.5em;">You digged into a bomb so you loose.</p>
		</div>
		
		<div id="winPage" class="ui-page ui-hide">
	        <!-- header -->
	        <div class="ui-header">
	            <div class="ui-title inline"><h2>MinesFinder</h2></div>
	        </div>
			<h1 style="margin: 0.5em; font-size: large;">You win!</h1>
			<div style="text-align: center; margin-top: 0.5em;">
				<input style="width: 80%;" type="button" name="button1" class="ui-button" value="Start a new game." onclick="location.reload();"/>
				<input style="width: 80%;" type="button" name="button2" class="ui-button" value="Settings and Infos." onclick="mwl.hide('#winPage'); mwl.show('#settingsPage');"/>
			</div>
			<p style="margin: 0.5em;">You flagged all bombs correctly so you win.</p>
		</div>
		
		<div id="settingsPage" class="ui-page ui-hide">
	        <!-- header -->
	        <div class="ui-header">
	            <div class="ui-title inline"><h2>MinesFinder</h2></div>
	        </div>
			
			<h1 style="margin: 0.5em; font-size: large;">Settings and Infos</h1>
			<div style="text-align: center; margin-top: 0.5em;">
				<input style="width: 80%;" type="button" name="button1" class="ui-button" value="Start a new game." onclick="location.reload();"/>
				<input style="width: 80%;" type="button" name="button2" class="ui-button" value="Toggle Cheat-Mode." onclick="mwl.toggleClass('#digBomb0', 'cheat'); mwl.toggleClass('#digBomb1', 'cheat'); mwl.toggleClass('#digBomb2', 'cheat'); mwl.toggleClass('#digBomb3', 'cheat'); mwl.toggleClass('#digBomb4', 'cheat'); mwl.toggleClass('#digBomb5', 'cheat'); mwl.toggleClass('#digBomb6', 'cheat'); mwl.toggleClass('#digBomb7', 'cheat'); mwl.toggleClass('#digBomb8', 'cheat'); mwl.toggleClass('#digBomb9', 'cheat'); mwl.toggleClass('#flagBomb0', 'cheat'); mwl.toggleClass('#flagBomb1', 'cheat'); mwl.toggleClass('#flagBomb2', 'cheat'); mwl.toggleClass('#flagBomb3', 'cheat'); mwl.toggleClass('#flagBomb4', 'cheat'); mwl.toggleClass('#flagBomb5', 'cheat'); mwl.toggleClass('#flagBomb6', 'cheat'); mwl.toggleClass('#flagBomb7', 'cheat'); mwl.toggleClass('#flagBomb8', 'cheat'); mwl.toggleClass('#flagBomb9', 'cheat'); mwl.hide('#settingsPage'); mwl.show('#gamePage');"/>
				<input style="width: 80%;" type="button" name="button3" class="ui-button" value="Back to the Game." onclick="mwl.hide('#settingsPage'); mwl.show('#gamePage');"/>
			</div>
			<p style="margin: 0.5em;">This litte game was made for the <b>Asha Touch Competition 2012Q3</b> and goes hand in hand with the wiki article about creating a highly responsive S40-WebApp.</p>
			<p style="margin: 0.5em;">But you can also just enjoy a round of MineFinder.</p>
		</div>
    
</body>
</html>